<!--单选框-->
<template>
	<div>
		<el-checkbox-group v-if="!allAttrs.butttonFlag" v-bind="allAttrs" :size="mySize" v-model="value" :id="'zhCheckbox' + columnId" :name="'zhCheckbox' + columnId" @change="onChange">
			<el-checkbox :key="item[nodeValue]" :border="allAttrs.border"   :disabled="item['disabled']" v-for="item in theOptions"  :value="item[nodeValue]">
				{{item[showLabel]}}
			</el-checkbox>
		</el-checkbox-group>
		<el-checkbox-group v-else v-bind="allAttrs" :size="mySize" v-model="value" :id="'zhCheckbox' + columnId" :name="'zhCheckbox' + columnId" @change="onChange">
			<el-checkbox-button :key="item[nodeValue]"   :disabled="item['disabled']" v-for="item in theOptions" :value="item[nodeValue]">
				{{item[showLabel]}}
			</el-checkbox-button>
		</el-checkbox-group>
	</div>
</template>

<script lang="ts" setup>
// 引入组件需要的属性 引入表单子控件的管理类
import { itemProps, itemController, selectProps, initSelect } from '../lib/mapController';
// 定义属性
const props = defineProps({
	...itemProps, // 基础属性
	...selectProps,
	modelValue: {
		type: [Number, String, Boolean, Array],
		default: '',
	},
});
const attrs = useAttrs();
const emit = defineEmits(['update:modelValue','change']);
const allAttrs = computed(() => {
	return Object.assign(props.extend, attrs);
});
const { value, globalSize } = itemController(props, allAttrs.value, emit);
const state = reactive({
	mySize: allAttrs.value.size,
});
const onChange=(value)=>{
  emit('change', value);
}
// 初始化
globalSize(state);
// 输出
const { theOptions, nodeValue, showLabel } = initSelect(props, value);
const { mySize } = toRefs(state);
</script>
<script lang="ts">
// 声明额外的选项
export default {
	name: 'zh-checkbox',
	inheritallAttrs: false,
};
</script>
